<template>
    <div class="detail-wrap">
        <el-breadcrumb class="cp-container" style="padding: 20px 0;" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/community/article' }">文章</el-breadcrumb-item>
            <el-breadcrumb-item>{{info.communityNews && info.communityNews.title}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="cp-container com-public-pt">
            <el-row :gutter="40">
                <el-col :span="18">
                    <div class="l">
                        <div class="comment bg-white">
                            <h3>{{info.communityNews && info.communityNews.title}}
                                <share-tooltip class="by-r"></share-tooltip>
                            </h3>
                            <div class="author-info flex">
                                <div class="author">
                                    <nuxt-link :to="info.communityNews.isExpert ? `/community/expert/detail/${info.communityNews.createUserId}` : `/community/article/detail/${info.communityNews.createUserId}/expertinfo`">
                                        <img :src="coverImgUrl + info.communityNews.communityExpertLogo" alt="">
                                    </nuxt-link>
                                </div>
                                <div class="info">
                                    <p>
                                        <nuxt-link :to="info.communityNews.isExpert ? `/community/expert/detail/${info.communityNews.createUserId}` : `/community/article/detail/${info.communityNews.createUserId}/expertinfo`">
                                            {{info.communityNews && info.communityNews.createUserName}}<i class="tb-d icon icon-arcct" v-if="info.communityNews.isExpert"></i>
                                        </nuxt-link>
                                    </p>
                                    <p v-if="info.communityNews && info.communityNews.communityjobDescription && info.communityNews.communityjobDescription.length > 0">{{info.communityNews && info.communityNews.communityjobDescription}}</p>
                                </div>
                            </div>
                            <div v-if="(info.communityNews && info.communityNews.isCharge) && (info.communityNews && info.communityNews.payment === false)">
                                <div v-html="info.communityNews && info.communityNews.info" ref="scale" :class="(info.communityNews && info.communityNews.isCharge) ? 'scale' : ''" class="init-edit">
                                </div>
                                <div class="is-charge">
                                    <a href="javascript:;" @click="communityReadAllFn">阅读全部</a>
                                    <p>支付金额：{{info.communityNews && info.communityNews.newsPrice}}元</p>
                                    <p>{{info.communityNews && info.communityNews.browseNum}}人已阅读</p>
                                </div>
                            </div>
                            <div class="is-pay" v-else>
                                <div v-html="info.communityNews && info.communityNews.info" class="init-edit"></div>
                                <span class="tips" v-if="info.communityNews && info.communityNews.payment">已支付</span>
                            </div>
                        </div>

                        <div class="bg-white mao">
                            <comment-view :commentType="'NEWS'" :commentId="Number($route.params.id)"></comment-view>
                        </div>
                        <to-login :isFlag="isFlag" @callBackDialog="callBackDialogFn"></to-login>
                    </div>
                </el-col>
                <el-col :span="6"><div class="r">
                    <div class="serve" v-if="info.communityExpertService && info.communityExpertService.length > 0">
                        <h3>TA的服务</h3>
                        <div v-for="(sItem, index) in servelistFn(info.communityExpertService)" :key="index">
                            <span class="d"></span>
                            <span>{{FILTER_FORMATER.wordNum(sItem.name, 12)}}</span>
                        </div>
                    </div>
                    <hot-article></hot-article>

                    <hot-author></hot-author>
                </div></el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Watch,
    Component
} from 'nuxt-property-decorator'
import {articleDetailApi, communityReadAll} from '../../../../../api/community/article'
import hotArticle from '~/components/community/article/hotArticle.vue'
import hotAuthor from '~/components/community/article/hotAuthor.vue'
import commentView from '~/components/common/commentView.vue'
import shareTooltip from '~/components/common/shareTooltip.vue'
import toLogin from '~/components/common/toLogin.vue'
@Component({
    layout: 'community',
    components: {hotArticle, hotAuthor, commentView, shareTooltip, toLogin},
    head () {
        const vthis = this as any
        return {
            title: vthis.info.communityNews.title + '-文章-CIIP社群中心 ',
            meta: [
                {hid: 'description', name: 'description', content: '社群中心文章，在这里可以浏览更多建筑专业知识，认识更多志同道合的人。'},
                {hid: 'keyword', name: 'keyword', content: '建筑文章，建筑社群，建筑知识'}
            ]
        }
    },
    async asyncData (context) {
        const {data}: any = await articleDetailApi({
            id: context.route.params.id,
            userid: context.store.state.userinfo.id || ''
        })
        if (data) {
            return {info: data.data || {}}
        }
    },
    validate ({params}) {
        return /^\d+$/.test(params.id)
    }
})
export default class PageArticleDetail extends Vue {
    isFlag: boolean = false
    coverImgUrl: string = this.$store.state.basefile
    payUrl: any = this.$store.state.baseurl
    info: any = {}
    @Watch('$store.state.userNum', {immediate: true})
    loginSuccess (val: number) {
        if (val > 0 && (this.info.communityNews && this.info.communityNews.isCharge) && (this.info.communityNews && this.info.communityNews.payment === false)) {
            this.getDec()
        }
    }
    async getDec () {
        const {data}: any = await articleDetailApi({
            id: this.$route.params.id,
            userid: this.$store.state.userinfo.id || ''
        })
        if (data.code > 0) {
            this.info = data.data
        }
    }
    async communityReadAllFn () {
        if (this.$store.state.haslogin) {
            const {data}: any = await communityReadAll({id: this.$route.params.id})
            if (data.code >= 0) {
                window.open(this.payUrl + '/JDCashier/gotoJDCashier?oId=' + data.data)
            } else {
                this.$message.error(data.msg)
            }
        } else {
            this.isFlag = true
        }
    }
    callBackDialogFn (bol: boolean) {
        this.isFlag = bol
    }
    /**
     * 控制文章显示百分比 */
    controlArticleHeight () {
        const that = this as any
        const dom = this.$refs.scale as any
        const height = dom.offsetHeight
        let modulus: any = 0
        if (that.info.communityNews.isCharge && that.info.communityNews.payment === false) {
            if (that.info.communityNews.proportion === '30%') {
                modulus = 0.3
            } else if (that.info.communityNews.proportion === '50%') {
                modulus = 0.5
            } else if (that.info.communityNews.proportion === '80%') {
                modulus = 0.8
            }
            const heightNum = height * modulus
            dom.style.height = heightNum + 'px'
        }
    }
    /**
     * 数据处理 */
    servelistFn (array: any) {
        const arrayList = []
        for (let i = 0; i < array.length; i++) {
            const obj: any = {}
            obj.name = array[i]
            arrayList.push(obj)
        }
        return arrayList
    }
    mounted () {
        const that = this as any
        if (that.info.communityNews.isCharge && that.info.communityNews.payment === false) {
            this.controlArticleHeight()
        }
    }
}
</script>

<style lang="scss" scoped>
.detail-wrap{
    background: #f8f8f8;
    .bg-white{
        background: #fff;
    }
    .comment{
        padding: 30px;
        margin-bottom: 30px;
        h3{
            padding-bottom: 15px;
            position: relative;
            font-size: 24px;
            .by-r{
                position: absolute;
                right: 0;
            }
        }
        .author-info{
            padding-bottom: 30px;
            .author{
                margin-right: 15px;
                img{
                    display: block;
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                    border: 1px solid #ddd;
                }
            }
            .info{
                p{
                    a{
                        font-size: 14px;
                        color: #666;
                    }
                    i{
                        margin: 0 0 -2px 10px;
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                    }
                }
                p+p{
                    padding-top: 5px;
                    color: #999;
                }
            }
        }

        .scale{
            overflow: hidden;
        }

        .is-charge{
            position: relative;
            z-index: 100;
            padding-top: 160px;
            bottom: -1px;
            margin-top: -150px;
            width: 100%;
            text-align: center;
            background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(70%, #fff));
            background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
            a{
                margin: 0 auto 20px;
                display: block;
                width: 80px;
                height: 32px;
                border-radius: 5px;
                line-height: 32px;
                text-align: center;
                background: #11a9e8;
                font-size: 14px;
                color: #fff;
            }
            p{
                padding: 0 0 10px 0;
                font-size: 12px;
                color: #999;
            }
        }

        .is-pay{
            position: relative;
            .tips{
                position: absolute;
                right: 0;
                color: #11a9e8;
            }
        }
    }

    .serve{
        padding: 20px;
        margin-bottom: 30px;
        background: #fff;
        h3{
            font-size: 14px;
        }
        div{
            padding: 10px 0;
            /*&:hover span{*/
            /*    color: #11a9e8;*/
            /*}*/
            /*&:hover .d{*/
            /*    background: #11a9e8;*/
            /*}*/
            span{
                display: inline-block;
                vertical-align: middle;
                font-size: 14px;
                color: #666;
            }
            .d{
                width: 4px;
                height: 4px;
                border-radius: 2px;
                background: #999;
            }
        }
    }
}
</style>

<style lang="scss">
    .init-edit{
        font-size: 14px!important;
        color: #333!important;
        img{
            max-width: 100%!important;
        }
    }
</style>
